<template>
  <el-dialog
    class="view-material-comp"
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(900)"
    :before-close="handleCancel">
    <div class="table-container">
      <el-table
        class="table-container"
        :data="tableData"
        v-loading="tableLoading"
        show-summary
        :summary-method="getSummaries"
        element-loading-custom-class="custom-load"
        row-key="id">
        <el-table-column label="序号" type="index" width="150" align="center"></el-table-column>
        <template v-if="type === '1'">
          <!--进场显示出库信息-->
          <el-table-column label="时间" prop="claimDate" align="center"></el-table-column>
          <el-table-column label="数量" prop="claimNum" width="100" align="center"></el-table-column>
          <el-table-column label="单位" prop="unit" align="center">
            <template slot-scope="scope">
              {{ scope.row.materialIn && scope.row.materialIn.unit || '' }}
            </template>
          </el-table-column>
          <el-table-column label="使用单位" prop="claimCompany" align="center"></el-table-column>
          <el-table-column label="责任人" prop="claimUserName" align="center"></el-table-column>
<!--          <el-table-column label="抄送人" prop="copyUserName" align="center"></el-table-column>-->
          <el-table-column label="附件" key="annexUrl">
            <template slot-scope="scope">
              <el-image
                v-if="/\.jpg|\.jpeg|\.png$/.test(scope.row.annexUrl)"
                class="img"
                :src="$checkUrl(scope.row.annexUrl)"
                :preview-src-list="[$checkUrl(scope.row.annexUrl)]">
              </el-image>
              <span
                v-else
                class="file-name"
                @click="handleDownLoad(scope.row.annexUrl)">
              {{ setFileName(scope.row.annexUrl) }}
            </span>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <!--离场显示入库信息-->
          <el-table-column label="材料名称" prop="materialTypeName" align="center"></el-table-column>
          <el-table-column label="规格/型号" prop="model" align="center"></el-table-column>
          <el-table-column label="领用数量" prop="claimNum" width="100" align="center"></el-table-column>
          <el-table-column label="剩余库存" prop="surplusNum" align="center"></el-table-column>
          <el-table-column label="单位" prop="unit" align="center"></el-table-column>
        </template>
        <div class="empty-content" slot="empty">
          <i class="iconfont iconwushuju"></i>
          <p>暂无数据</p>
        </div>
      </el-table>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 1： 进场 2： 离场
    type: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.clear();
      }
    },
    options: {
      deep: true,
      handler(data) {
        if (data && data.id) {
          this.getTableData(data.id);
        }
      }
    }
  },
  computed: {
    // 弹框标题
    title() {
      return this.options.materialTypeName || '查看';
    }
  },
  methods: {
    /**
     * 获取列表数据
     */
    async getTableData(id) {
      this.tableLoading = true;
      const params = {
        id,
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        type: this.type,
      };
      if (this.hasSearch) {
        params.condition = this.condition;
      }
      const { success, data: {
        data
      }} = await this.$Model.getStockSelectPage(params);
      this.tableLoading = false;
      if (success && data) {
        const list = data.list || [];
        this.tableData = list.map(item => {
          const { materialOut, materialIn } = item;
          return this.type === '1'
            ? { ...item, ...materialOut }
            : { ...item, ...materialIn };
        });
        this.total = data.total || 0;
      }
    },
    // 合计设置
    getSummaries(param) {
      const { surplusNum, unit } = this.options;
      const { columns } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0 && this.type === '1') {
          sums[index] = `剩余：${surplusNum || 0}${unit || ''}`;
          return;
        }
        sums[index] = '';
      });
      return sums;
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    // 设置附件信息
    setFileName(url) {
      const fileNames = url ? url.match(/([^\/])+\.\w+$/) : '';
      return Array.isArray(fileNames) ? fileNames[0] : '';
    },
    // 下载
    handleDownLoad(url) {
      window.open(this.$checkUrl(url));
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 取消
    handleCancel() {
      this.$emit('cancel');
    },
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/dialog";

  .view-material-comp {
    .table-container {
      /deep/ .el-table {
        .el-table__body-wrapper {
          min-height: 300px;
          max-height: 450px;
          overflow-y: auto;
          .img {
            width: 60px;
            height: 60px;
          }
        }
        .el-table__footer-wrapper {
          .cell {
            font-weight: bold;
          }
        }
      }
    }
  }
</style>
